<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-facing-decorator';
import type { ApiResponse } from '@/api/common';
import { ElMessage } from 'element-plus';
import UserLink from '@/pages/profile/component/UserLink.vue';
import type { UserListResponse } from '@/api/auth/auth';

@Component({
  components: {
    UserLink,
  },
})
export default class UserList extends Vue {
  @Prop() api!: (page: number) => Promise<ApiResponse<UserListResponse>>

  total: number = 0;
  page: number = 1;
  users: UserListResponse['users'] | null = [];
  @Watch('api')
  apiChangeHandler() {
    if (this.page !== 1) this.page = 1;
    else this.query();
  }
  @Watch('page')
  pageChangeHandler() {
    this.query();
  }

  queryLoading: symbol | null = null;
  async query() {
    const token = this.queryLoading = Symbol();
    this.users = null;
    const resp = await this.api(this.page);
    if (token !== this.queryLoading) return;
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
      return;
    }
    this.total = resp.data.total;
    this.users = resp.data.users;
  }

  mounted() {
    this.query();
  }
}
</script>
<template>
<div class="user-list-container">
  <div class="user-list">
    <div v-for="user in users" :key="user.id" class="user-list-item">
      <div class="user-list-item-avatar">
        <user-link :user="user">
          <img :src="user.avatar ? '/api/image/' + user.avatar : './img/avatar.png'" alt="" :title="user.name" />
        </user-link>
      </div>
      <div class="user-list-item-text">
        <user-link :user="user" />
        <div class="user-list-item-created">注册于 {{ new Date(user.created_at).toLocaleDateString() }}</div>
      </div>
    </div>
  </div>
  <div class="user-list-empty" v-if="users && !users.length">暂无用户</div>
  <div class="user-list-pagination" v-if="total > 20">
    <el-pagination :current-page="page" :page-size="20" layout="prev, pager, next" :total="total" @current-change="page = $event" />
  </div>
</div>
</template>
<style scoped>
.user-list-container {
  display: flow-root;
}

.user-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.tiny-mode .user-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.user-list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
}

.user-list-item:hover {
  box-shadow: var(--el-box-shadow-light);
}

.user-list-item-avatar {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}

.user-list-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-list-item-text {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.user-list-item-username {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-list-item-created {
  font-size: 90%;
  color: var(--el-text-color-secondary);
}

.user-list-empty {
  text-align: center;
  padding: 20px;
  color: var(--el-text-color-secondary);
}

.user-list-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
